<template>
  <div class="big">
    <div class="top">
      <img src="./images/箭头.png" alt="" @click="goback" />
      <span>失寻中心</span>
    </div>
    <div id="container"></div>
    <div class="content">
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px margin-top:100px"
      >
        <el-form-item label="爱宠名字">
          <el-input
            v-model="formLabelAlign.name"
            placeholder="输入名称(由4-10个字符组成)"
          />
        </el-form-item>
        <el-form-item label="位置">
          <!-- <el-input v-model="formLabelAlign.region" placeholder="定位中" /> -->
          <el-form :inline="true" class="from">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-select
                  v-model="tipInput"
                  class="tipInput"
                  filterable
                  remote
                  reserve-keyword
                  clearable
                  placeholder="搜地点"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  @change="tipChange"
                >
                  <el-option
                    v-for="item in tips"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                    <span style="float: left">{{ item.name }}</span>
                    <span
                      style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.district }}</span
                    >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form>
        </el-form-item>
        <el-form-item label="品种">
          <el-input v-model="formLabelAlign.type" placeholder="" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input
            v-model="formLabelAlign.type"
            placeholder="请输入您爱宠的年龄"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="formLabelAlign.type" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="其他" class="put">
          <el-input v-model="formLabelAlign.type" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="上传照片">
          <el-input v-model="formLabelAlign.type" placeholder="" />

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// import AMap from "AMap"

import { reactive, ref, shallowRef } from "@vue/reactivity";

window._AMapSecurityConfig = {
  securityJsCode: "05c9b83406ab18117a14231f099b3ddd",
};

export default {
  name: "IndexMissing",
  setup() {
    const map = shallowRef(null);

    function goback() {
      history.go(-1);
    }

    const labelPosition = ref("left");
    const formLabelAlign = reactive({
      name: "",
      region: "",
      type: "",
    });

    return {
      goback,
      map,
      labelPosition,
      formLabelAlign,

      // tipInput: "",
      // loading: false,
      //   map: undefined,
      // tips: [],
    };
  },
  data() {
    return {
      tipInput: "",
      loading: false,
      // map: undefined,
      tips: [],
    };
  },
  create() {},
  methods: {
    ininMap() {
      AMapLoader.reset();
      AMapLoader.load({
        key: "4e5ba942003a57665e3b2ba5d895aa4c", //设置您的key
        version: "2.0",
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.DistrictSearch",
          "AMap.Geocoder",
          "AMap.DistrictLayer",
        ],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zooms: [2, 22],
            center: [104.0862, 30.399],

            resizeEnable: true,
            zoom: 13, //地图显示的缩放级别
            keyboardEnable: false,
          });
          let positionArr = [[104.0862, 30.399]];
          for (let item of positionArr) {
            let marker = new AMap.Marker({
              position: [item[0], item[1]],
            });
            this.map.add(marker);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },

    tipChange(value) {
      for (const tip of this.tips) {
        if (value == tip.id) {
          this.map.setZoom(13);
          this.map.setCenter(tip.location);
          break;
        }
      }
    },

    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        console.log(this);
        // const that = this;

        // AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
        //   // let map = new AMap.Map("container",{
        //   //   resizeEnable: true,
        //   // });
        //   let autoOptions = {
        //     // 使用联想输入的input的id
        //     input: 'tipInput',
        //   };

        //   let autocomplete = new AMap.AutoComplete(autoOptions);

        //   let placeSearch = new AMap.PlaceSearch({
        //     // city: "北京",
        //     map: this?.map,
        //     autoFitView: true,
        //     extensions: "base",
        //   });
        //   window.onload = function () {
        //     AMap.event.addListener(autocomplete, "select", select);
        //     function select(e) {
        //       placeSearch.setCity(e.poi.adcode);
        //       placeSearch.search(e.poi.name); //关键字查询查询
        //     } //注册监听，当选中某条记录时会触发
        //   };
        // });
      }
    },
    addMarker() {},
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.ininMap();
  },
};
</script>

<style lang="less" scoped>
.big {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.top {
  width: 24rem;
  height: 3.5rem;
  background-color: rgb(135, 142, 205);
}
.top img {
  width: 1.25rem;
  height: 1.875rem;
  margin-left: 1.15rem;
  margin-top: 1rem;
}
.top span {
  font-size: 1.5625rem;
  position: absolute;
  top: 0.625rem;
  left: 8.5rem;
}
#container {
  width: 23.75rem;
  height: 11.25rem;
  //   z-index: -1;
}
.content {
  width: 99%;
  height: 32.25rem;
  border: 1px solid gray;
  border-radius: 1.25rem;
  //   margin-top: -1.25rem;
  background-color: white;
  .el-form {
    margin-top: 4.25rem;
  }
  /deep/.el-form-item {
    // background-color: red;
    border-bottom: 1px solid gray;
  }
  /deep/.el-input__wrapper {
    border: none !important;
    box-shadow: none !important;
    padding: 0px;
    background-color: rgba(0, 0, 0, 0);
  }
  .put .el-input {
    width: 13.25rem;
    height: 4.25rem;
    border-radius: 1.25rem;
    background-color: rgb(226, 223, 223);
  }

  .from {
    position: absolute;
    top: -4.0625rem;
  }
}
</style>